<template>
  <el-container id="lap-app">
    <el-main>
      <lap-find-bar>
        <template slot="default">
          <el-date-picker
            placeholder="查询本日起往后十天的数据"
            v-model="searchConfig.DateBgn"
            align="right"
            type="date"
            style="width: 220px"
          ></el-date-picker>
          <el-input
            placeholder="输入消息关键字"
            v-model="searchConfig.SearchText"
            style="width: 250px"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="onSearch"
            ></el-button>
          </el-input>
          <el-button icon="el-icon-clear" @click="onHandleClear"
            >清空查询条件</el-button
          >
        </template>
      </lap-find-bar>
      <lap-table-bar>
        <template slot="title">近半年文件日志</template>
      </lap-table-bar>
      <el-table ref="table" :data="tableData" :highlight-current-row="true">
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column
          property="FileName"
          label="文件名"
          :show-overflow-tooltip="true"
          width="200"
        ></el-table-column>
        <el-table-column
          property="Abstract"
          label="搜索预览"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" width="60">
          <template slot-scope="scope">
            <el-button type="text" @click="() => onHandleDownload(scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
export default {
  mixins: [$lap.BaseView],
  name: "app",
  components: {}, //引用组件
  data() {
    return {
      title: "日志下载", //页面标题，例如：用户管理
      pageFunctionCode: "", //页面功能定义，例如：00100104
      searchConfig: {
        DateBgn: null,
        SearchText: null,
      },
      tableData: [],
      isSimple: false,
    };
  },
  methods: {
    /**
     * 加载
     */
    platLoadData() {
      const that = this;
      that.isSimple = that.$route.params.simple == 1 ? true : false;
      that.loadData();
    },
    /**
     * 加载数据
     */
    loadData() {
      const that = this;
      $lap
        .post("/MLogXWeb/LogHandler.ashx", {
          type: "SearchTextInLog",
          config: Base64.encode(JSON.stringify(that.searchConfig)),
          isSimple: that.isSimple,
        })
        .then((data) => {
          that.tableData = data;
        });
    },
    /**
     * 搜索
     */
    onSearch() {
      const that = this;
      that.loadData();
    },
    /**
     * 复制日志
     */
    onHandleDownload(row) {
      window.open("/Tracelogs/MLog/" + row.FileName);
    },
    /**
     * 清空查询条件
     */
    onHandleClear() {
      const that = this;
      that.searchConfig.DateBgn = null;
      that.searchConfig.SearchText = null;
      that.onSearch();
    },
  },
  watch: {
    $route(to, from) {
      this.platLoadData();
    },
  },
};
</script>